class Cart{
    constructor(){
        this.tbody = document.querySelector("tbody");
        this.url = "http://localhost:3000/data/goods.json";

        // 1. 开启ajax请求
        this.load();

        // 7. 绑定事件
        this.addEvent();
    }
    addEvent(){
        const that = this;
        this.tbody.addEventListener("input",function(eve){
            const e = eve || window.event;
            const tar = e.target || e.srcElement;
            // 8. 找到数量输入框
            if(tar.className === "setNum"){
                // 获取id
                that.id = tar.parentNode.parentNode.getAttribute("index")
                // 获取数量
                that.num = tar.value-0;
                // 9. 从cookie的总数据中，查找要操作的数据的索引
                that.setCookie(function(i){
                    // 修改查找到数据的数量
                    that.goodsMsg[i].num = that.num;
                });
            }
        })
        
        this.tbody.addEventListener("click",function(eve){
            const e = eve || window.event;
            const tar = e.target || e.srcElement;
            // 10. 点击时找到删除按钮
            if(tar.className === "del"){
                // 获取id
                that.id = tar.parentNode.getAttribute("index");
                // 删除DOM
                tar.parentNode.remove();
                // 11. 从cookie的总数据中，查找要操作的数据的索引
                that.setCookie(function(i){
                    // 从数组中删除查找到的数据
                    that.goodsMsg.splice(i, 1);
                });
            }
        })
    }
    setCookie(cb){
        // 先从原有数据中，找到当前要操作的数据
        let i=0;
        this.goodsMsg.some((val,idx)=>{
            i = idx;
            return val.id === this.id
        })
        // 找到当前要操作的数据之后，执行外部传入的修改操作
        cb(i);
        // 将数据，存回本地存储，覆盖原数据
        setCookie("goodsMsg",JSON.stringify(this.goodsMsg))
    }
    load(){
        ajax({
            url:this.url,
            success:(res)=>{
                // 2. 解析数据
                this.res = JSON.parse(res).msg;
                // console.log(this.res);
                // 3. 获取本地存储数据
                this.getCookie();
            }
        })
    }
    getCookie(){
        // 4. 解析本地存储数据
        this.goodsMsg = getCookie("goodsMsg") ? JSON.parse(getCookie("goodsMsg")) : [];
        // console.log(this.goodsMsg, this.res);
        // 5. 准备渲染页面
        this.render();
    }
    render(){
        let str = "";
        // 读取商品总数据
        for(let i=0;i<this.res.length;i++){
            // 读取本地存储数据
            for(let j=0;j<this.goodsMsg.length;j++){
                // 根据本地存储数据，比对商品总数据，获取到真正要渲染的数据
                if(this.res[i].proId === this.goodsMsg[j].id){
                    // console.log(this.res[i], this.goodsMsg[j].num);
                    // 拼接页面结构
                    str += `<tr index="${this.res[i].proId}">
                                <td><input type="checkbox"></td>
                                <td><img src="${this.res[i].img}"></td>
                                <td>${this.res[i].proName}</td>
                                <td><input type="number" value="${this.goodsMsg[j].num}" class="setNum"></td>
                                <td>${this.res[i].price}</td>
                                <td>${this.res[i].price * this.goodsMsg[j].num}</td>
                                <td class="del">删除</td>
                            </tr>`;
                }
            }
        }
        // 6. 填充到页面
        this.tbody.innerHTML = str;
    }
}

new Cart;